<!DOCTYPE html>
<html lang="zh_cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>热更新授权系统</title>
  <!-- 引入Vue.js -->
  <script src="vue@2.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app" class="app">
    <el-container v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-header>
        <h2>热更新授权系统</h2>
      </el-header>
      <el-main>

        <div>
          <el-form ref="AccountForm" :model="UpdateFrom" label-width="140px">

            <el-form-item label="热更新授权码">
              <el-input v-model="UpdateFrom.permissionCode"></el-input>
            </el-form-item>
          </el-form>
          <el-button v-if="isTable == 0" type="primary" @click="onSubmit">立即授权</el-button>
        </div>


      </el-main>
    </el-container>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: '',
        UpdateFrom: {
          permissionCode: ''
        },
        formLabelWidth: '120px',
        loading: false,
        isTable: 0
      },
      methods: {
        showMessage: function () {
          this.message = this.userInput;
        },
        pushinfo(){
          
          this.loading = true
          // 使用axios发送GET请求
          axios.get(`http://localhost:8081/auth_api.php?km=${this.UpdateFrom.permissionCode}`)
            .then(response => {
              this.loading = false
              // 请求成功时的处理
              // console.log(response)
              const data = response.data;
              if (data.code === 200) {
                // this.tableData.length = 0
                // this.isTable = 1
                // 处理存在数据的情况
                // console.log(data.msg);
                // console.log(`原uid: ${data['old_uid']}, 现uid: ${data['new_uid']}`);

                this.$message({
                  message: data.msg,
                  type: 'success'
                });

                this.tishi("授权成功，请您关闭此页面，重新进入游戏资源更新大区！！")

                // this.tableData.push(data)


              } else {
                // 其他情况的处理
                this.$message({
                  message: data.msg,
                  type: 'error'
                });
                console.log(data.msg);

              }
            })
            .catch(error => {
              // 请求失败时的处理
              this.loading = false
              // console.error(error);
              this.$message({
                message: "服务器错误，联系管理！",
                type: 'error'
              });
            });
        },
        onSubmit() {
          this.$alert("授权码授权后不可更换网络，使用后生效两个小时", "授权即将开始", {
            confirmButtonText: '我知道了，我保证不当傻逼！',
            callback: action => {
              this.pushinfo()
            }
            
          });
        },
        tishi(msg) {
          this.$notify({
            title: '成功',
            message: msg,
            type: 'success'
          });
        },
        tanKuang(con,title,mint) {
          this.$alert(con, title, {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'success',
                message: mint
              });
            }
          });
        }

      },
      mounted() {

        this.tanKuang("授权过程中会获取您的硬件ID和IP信息，请不要使用游戏加速器或者魔法上网（VPN），保持正常的家用环境，否则收取按后可能会无法下载！",'⚠授权注意事项',"请开始授权！")

      }
    });
  </script>

  <style>
    body {
      background-image: url(https://api.ciyuandun.com/?like=pc-genshin-wallhaven);
      background-size: cover;

      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
      /* 使body元素占满整个视口高度 */
      margin: 0;
      /* 去除body元素的默认外边距 */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .app {
      width: 80%;
      display: flex;
      margin: 0 auto;
      align-items: center;
      background-color: rgba(255, 255, 255, .5);
      border-radius: 15px;
      /* height: 100vh; */
      /* 这个是为了确保body元素占满整个视口高度 */

      /* flex-direction: column; */
    }

    /* 设置表头的高度 */
    .el-table thead th {
      line-height: 10px;
      height: 60px;
      /* 设置表头的高度为60px */
    }

    .el-input__inner {
      background-color: rgba(255, 255, 255, .5);
    }

    .el-form-item__label {
      color: black;
    }

    .el-table {
      border-radius: 15px;
    }

    .el-header {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      /*line-height: 60px;*/
    }

    .el-header>h2 {
      line-height: 50%;
    }


    /* 默认样式适用于大屏幕设备 */
    .el-main {
      /* background-color: #E9EEF3; */
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    /* 当屏幕宽度小于等于768px时应用的样式 */
    @media (max-width: 768px) {
      .el-main {
        line-height: 120px;
      }
    }

    /* 当屏幕宽度小于等于480px时应用的样式 */
    @media (max-width: 480px) {
      .el-main {
        line-height: 80px;
      }

      .el-header>h2 {
        font-size: 24px;
        /* 适配小屏幕的标题字体大小 */
      }
    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>
</body>

</html>